import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/productList_conttoller.dart';
import '../../../services/screebAdapter.dart';
import '../../../services/httpsClient.dart';

class ProductListView extends GetView<ProductListController> {
  const ProductListView({super.key});

  // 商品列表
  Widget _productListWidget() {
    return Obx(() => controller.plist.isNotEmpty
        ? ListView.builder(
            controller: controller.scrollController,
            padding: EdgeInsets.only(top: ScreenAdapter.height(130)),
            itemCount: controller.plist.length,
            itemBuilder: (BuildContext context, int index) {
              return Column(
                children: [
                  Container(
                    padding: EdgeInsets.only(
                        left: ScreenAdapter.width(26),
                        right: ScreenAdapter.width(26),
                        bottom: ScreenAdapter.width(10)),
                    margin: EdgeInsets.only(bottom: ScreenAdapter.height(26)),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10)),
                    child: Row(
                      children: [
                        // 左侧
                        Container(
                          padding: EdgeInsets.all(ScreenAdapter.width(60)),
                          width: ScreenAdapter.width(400),
                          height: ScreenAdapter.height(460),
                          child: Image.network(
                            HttpsClient.replaeUrl(controller.plist[index].sPic),
                            fit: BoxFit.fitHeight,
                          ),
                        ),
                        // 右侧
                        Expanded(
                            flex: 1,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      bottom: ScreenAdapter.height(20)),
                                  child: Text(
                                    controller.plist[index].title,
                                    style: TextStyle(
                                        fontSize: ScreenAdapter.fontSize(42),
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(
                                      bottom: ScreenAdapter.height(20)),
                                  child: Text(
                                    controller.plist[index].subTitle,
                                    style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(34),
                                    ),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.only(
                                      bottom: ScreenAdapter.height(20)),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          flex: 1,
                                          child: Column(
                                            children: [
                                              Text("CUP",
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(34),
                                                      fontWeight:
                                                          FontWeight.bold)),
                                              Text("Helio G25",
                                                  style: TextStyle(
                                                    fontSize:
                                                        ScreenAdapter.fontSize(
                                                            34),
                                                  ))
                                            ],
                                          )),
                                      Expanded(
                                          flex: 1,
                                          child: Column(
                                            children: [
                                              Text("高清拍摄",
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(34),
                                                      fontWeight:
                                                          FontWeight.bold)),
                                              Text("1300万像素",
                                                  style: TextStyle(
                                                    fontSize:
                                                        ScreenAdapter.fontSize(
                                                            34),
                                                  ))
                                            ],
                                          )),
                                      Expanded(
                                          flex: 1,
                                          child: Column(
                                            children: [
                                              Text("超大屏",
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(34),
                                                      fontWeight:
                                                          FontWeight.bold)),
                                              Text("6.1寸",
                                                  style: TextStyle(
                                                    fontSize:
                                                        ScreenAdapter.fontSize(
                                                            34),
                                                  ))
                                            ],
                                          )),
                                    ],
                                  ),
                                ),
                                Text(
                                  '￥${controller.plist[index].price}起',
                                  style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(38),
                                      fontWeight: FontWeight.bold),
                                ),
                              ],
                            ))
                      ],
                    ),
                  ),
                  (index == controller.plist.length - 1)
                      ? _progressIndicator()
                      : const Text('')
                ],
              );
            },
          )
        : _progressIndicator());
  }

  Widget _subHeaderWidget() {
    return Positioned(
        left: 0,
        right: 0,
        top: 0,
        child: Obx(() => Container(
              height: ScreenAdapter.height(120),
              width: double.infinity,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                      bottom: BorderSide(
                          width: ScreenAdapter.height(1),
                          color: const Color.fromRGBO(233, 133, 133, 0.9)))),
              child: Row(
                children: controller.subHeaderList.map((item) {
                  return Expanded(
                      flex: 1,
                      child: Row(
                        children: [
                          InkWell(
                            onTap: () {
                              controller.subHeaderChange(item['id']);
                            },
                            child: Padding(
                              padding: EdgeInsets.only(
                                  top: ScreenAdapter.height(16),
                                  bottom: ScreenAdapter.height(16)),
                              child: Text(
                                item['title'],
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    color: controller.selectHeaderId.value ==
                                            item['id']
                                        ? Colors.red
                                        : Colors.black54,
                                    fontSize: ScreenAdapter.fontSize(32)),
                              ),
                            ),
                          ),
                          _showIcon(item['id'])
                        ],
                      ));
                }).toList(),
              ),
            )));
  }

// 自定义图标
  Widget _showIcon(id) {
    // controller.subHeaderListSort.value响应式状态，为了改变状态
    if (id == 2 ||
        id == 3 ||
        controller.subHeaderListSort.value == 1 ||
        controller.subHeaderListSort.value == -1) {
      if (controller.subHeaderList[id - 1]['sort'] == -1) {
        return Icon(
          Icons.arrow_drop_down,
          color: controller.selectHeaderId.value == id
              ? Colors.red
              : Colors.black54,
        );
      } else {
        return Icon(
          Icons.arrow_drop_up,
          color: controller.selectHeaderId.value == id
              ? Colors.red
              : Colors.black54,
        );
      }
    } else {
      return const Text('');
    }
  }

// 加载中组件
  Widget _progressIndicator() {
    if (controller.hasData.value) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    } else {
      return const Center(
        child: Text("没有数据了,我是有底线的"),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: controller.globalKey,
        endDrawer: const Drawer(
          child: DrawerHeader(child: Text('右侧筛选')),
        ),
        backgroundColor: const Color.fromRGBO(246, 246, 246, 1),
        appBar: AppBar(
          actions: const [Text('')],
          title: InkWell(
            onTap: () {
              Get.offAndToNamed('/search');
            },
            child: Container(
              width: ScreenAdapter.width(900),
              height: ScreenAdapter.height(96),
              decoration: BoxDecoration(
                  color: const Color.fromRGBO(246, 246, 246, 1),
                  borderRadius: BorderRadius.circular(30)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: EdgeInsets.only(
                        left: ScreenAdapter.width(34),
                        right: ScreenAdapter.width(34)),
                    child: const Icon(Icons.search),
                  ),
                  Text(controller.keyWords != null ? controller.keyWords : ""),
                ],
              ),
            ),
          ),
          centerTitle: true,
          backgroundColor: Colors.white,
        ),
        body: Stack(
          children: [
            _productListWidget(),
            _subHeaderWidget(),
          ],
        ));
  }
}
